<template>
  <div>
    <common-head v-if="detail.basicInfo" :title="detail.basicInfo.name"/>
    <div class="wrap" v-if="detail.basicInfo">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in detail.pics" :key="banner.id">
          <img :src="banner.pic" alt="">
        </van-swipe-item>
      </van-swipe>
      <h3>{{detail.basicInfo.name}}</h3>
      <!-- 详情 -->
      <div class="content" v-html="content"></div>
      <!-- /详情 -->
    </div>
    <!-- 商品行动栏 -->
    <van-goods-action>
      <van-goods-action-icon @click="$router.push('/home')" icon="wap-home-o" text="首页" />
      <van-goods-action-icon @click="$router.push('/cart')" icon="cart-o" text="购物车" />
      <van-goods-action-button @click="showSku(0)" type="warning" text="加入购物车" />
      <van-goods-action-button @click="showSku(1)" type="danger" text="立即购买" />
    </van-goods-action>
    <!-- /商品行动栏 -->
    <!-- 弹出sku -->
    <van-popup v-model="show" round closeable position="bottom" :style="{ height: '30%' }">
      <div class="sku">
        <van-card
          :num="sku.num"
          :price="sku.minPrice"
          :title="sku.name"
          :thumb="sku.pic"
        >
          <template #footer>
            <van-stepper v-model="sku.num"/>
          </template>
        </van-card>
        <van-button @click="confirmClick" color="#fdc541" round size="large">确定</van-button>
      </div>
    </van-popup>
    <!-- /弹出sku -->
  </div>
</template>

<script>
import { fetchDetail } from 'api'
import CommonHead from '../../components/CommonHead.vue'
import cartMixin from 'mixins/addCart'
export default {
  data () {
    return {
      detail: {},
      show: false,
      sku: { // 提交购物车、订单页的 商品 规格 sku

      },
      clickAction: 0 // 0加入购物车 1立即购买
    }
  },
  mixins: [cartMixin],
  created () {
    this.fetchDetail()
  },
  methods: {
    confirmClick () {
      // 点击加入购物车 或者 立即购买
      if (this.clickAction === 0) {
        this._addCart(this.sku)
        this.show = false
      } else {
        alert('立即购买')
      }
    },
    showSku (n) {
      // 弹出商品规格页
      this.show = true
      this.clickAction = n
    },
    fetchDetail () {
      fetchDetail(this.$route.query.id).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.detail = res.data.data
          this.sku = {
            ...res.data.data.basicInfo,
            num: 1,
            checked: true
          }
        }
      })
    }
  },
  computed: {
    content () {
      return this.detail.content.replace(/<img/g, '<img style="display:block;width:100%"')
    }
  },
  components: { CommonHead }
}
</script>

<style lang="scss" scoped>
.wrap{
  margin-top: 46px;
  .my-swipe{
    img{
      width:100%;
    }
  }
  // .content{
  //  /deep/ img{
  //     display:block;
  //   }
  // }
}

.sku{
  height: 100%;
  background-color: #fafafa;
}
</style>
